<template>
  <div style="margin: 50px 50px">
    <a-date-picker
      format="YYYY年"
      mode="year"
      :value="createValue"
      placeholder="选择年份"
      :open="isopen"
      @change="onChange"
      @openChange="openChange"
      @panelChange="panelChange"
    >
    </a-date-picker>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'aYearPicker',
  components: {},
  data () {
    return {
      queryForm: '',
      isopen: false,
      createValue: null,
      Year: null
    }
  },
  methods: {
    moment,
    // 使用change事件来清除输入框中的值
    onChange () {
      this.createValue = null
      this.Year = null
    },
    // 使用openChange事件控制日期下拉面板显示与收起
    openChange (isopen) {
      if (isopen) {
        this.isopen = true
        console.log('显示年份弹窗')
      } else {
        this.isopen = false
      }
    },
    // 使用panelChange事件控制选中年份的方法
    panelChange (value) {
      this.createValue = value
      console.log(this.createValue)
      // 接panelChange返回的值 并用monent格式化时间为年
      this.Year = moment(value).format('YYYY年')
      console.log('YYYY:' + this.Year)
      this.isopen = false
    }
  }
}
</script>

<style></style>
